<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="请替换为您的关键字">
  <meta name="description" content="请替换为您的描述">
  <title>云充电平台</title>
  <!-- bower:css -->
  <!-- endbower -->
  <link rel="stylesheet" href="fonts/iconfont.css">
  <link rel="stylesheet" href="styles/main.css">
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=B5GIu2zryfbhsVQ98n097fgXGgUV8B7j"></script>
  <style type="text/css">
    body, html, #allmap {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      font-family: "微软雅黑";
    }
  </style>
</head>
<body>
<!-- 搜索框 -->
<div class="search">
  <form class="search-form">
    <input class="form-control" type="text" placeholder="搜索充电站或地点">
    <span class="addon icon-search"></span>
    <a class="icon-scan" href="javascript:void(0);"></a>
  </form>
</div>
<!-- /搜索框 -->

<div id="allmap"></div>

<!-- 充电站信息 -->
<div class="stationInfo" id="sinfo">
  <div id="moveDiv">
    <a class="navto"></a>
    <div class="distance">&#60;500米</div>
    <h4 class="stationInfo-title">六约充电站<span class="badge">快充</span><span class="badge">24H</span></h4>
    <p>地址：六月新村环城西线</p>
    <p class="status"><span>空闲:<em>131</em></span><span>电费:<em>1.6元/度</em></span><span>服务费:<em>0.45元/度</em></span></p>
  </div>
  <div class="moreInfo">
    <div class="stationInfo-desc">
      <div class="row">
        <div class="col-xs-3">费用说明</div>
        <div class="col-xs-9">充电费：1.6元/度，服务费：0.45元/度，停车费：3元/小时，12小时内10元封顶</div>
        <div class="col-xs-3">支付方式</div>
        <div class="col-xs-9">充值卡支付,微信支付,支付宝支付,现金</div>
      </div>
    </div>
    <div class="row stationInfo-reservation">
      <div class="col-xs-12">
        <a href="##" class="btn btn-primary btn-lg btn-block">立即预约</a>
      </div>
    </div>
  </div>
</div>
<!-- /充电站信息 -->

<!-- 地图控件按钮 -->
<!--<div class="map_control_filter">-->
<div class="map_control map_control_filter" href="javascript:void(0);">
  <ul class="map_control_submenu" style="display: none;">
    <li><a href="##">快充</a></li>
    <li><a href="##">支持预约</a></li>
    <li><a href="##">免费停车</a></li>
  </ul>
</div>
<a class="map_control map_control_list" href="##"></a>
<div class="map_control_group" id="zoom">
  <a class="map_control map_control_zoomin" href="##"></a>
  <a class="map_control map_control_zoomout" href="##"></a>
</div>
<a class="map_control map_control_locate" id="locate" href="##"></a>
<!--</div>-->
<!-- /地图控件按钮 -->

<!-- bower:js -->
<!-- endbower -->

<script type="text/javascript">
  // 获取设备dpr
  // alert(window.devicePixelRatio);
  // 百度地图API功能
  var map = new BMap.Map("allmap");
  var point = new BMap.Point(116.404, 39.915);
  map.centerAndZoom(point, 15);

  //创建地图图标
  var pt = new BMap.Point(116.404, 39.915);
  var myIcon = new BMap.Icon("imgs/map_marker.png", new BMap.Size(75, 75));
  var marker2 = new BMap.Marker(pt, {icon: myIcon});  // 创建标注
  map.addOverlay(marker2);              // 将标注添加到地图中

  $("#moveDiv").on("touchstart", function(e) {
    // 判断默认行为是否可以被禁用
    if (e.cancelable) {
      // 判断默认行为是否已经被禁用
      if (!e.defaultPrevented) {
        e.preventDefault();
      }
    }
    startX = e.originalEvent.changedTouches[0].pageX,
    startY = e.originalEvent.changedTouches[0].pageY;
  });
  // $('#sinfo').hide();
  $("#moveDiv").on("touchmove", function(e) {
    // 判断默认行为是否可以被禁用
    if (e.cancelable) {
      // 判断默认行为是否已经被禁用
      if (!e.defaultPrevented) {
        e.preventDefault();
      }
    }
    moveEndX = e.originalEvent.changedTouches[0].pageX,
    moveEndY = e.originalEvent.changedTouches[0].pageY,
    X = moveEndX - startX,
    Y = moveEndY - startY;

    //下滑
    if ( Y > 0) {
      $('#sinfo').removeClass('expand');
      $('.stationInfo-desc').css('height', '0');
      $('.stationInfo-reservation').css('height', '0');
    }
    //上滑
    else if ( Y < 0 ) {
      $('#sinfo').addClass('expand');
      $('.stationInfo-desc').css('height', 'auto');
      $('.stationInfo-reservation').css('height', 'auto');
    }

    $('#zoom').css('bottom', $(sinfo_h).outerHeight() + 137);
    $('#locate').css('bottom', $(sinfo_h).outerHeight() + 20)
  });

  // 地图放大缩小及定位控件动态计算位置
  var sinfo_h = document.getElementById('sinfo');
  $('#zoom').css('bottom', $(sinfo_h).outerHeight() + 137);
  $('#locate').css('bottom', $(sinfo_h).outerHeight() + 20);

  $('.map_control_filter').click(function() {
    $('.map_control_submenu').toggle();
    $(this).toggleClass('open');
  });
</script>

</body>
</html>
